<template>
    <div class="winfy-chart">
        <div class="chart-set">
            <wfChartSet :list="data"
                        :type="type"
                        @update-chart="updateConfig" />
        </div>
        <div class="chart-wraper">
            <wfChart :chartId="id" />
        </div>
    </div>
</template>

<script>
import wfChart from "@/components/wfChart/wfChart.vue";
import wfChartSet from "@/components/wfChart/wfChartSet.vue";

import echarts from "echarts";
import { initBarOption, initPieOption } from "@/utils/option.js";
// import mockData from "@/data/mock.js";
export default {
    name: "demo",
    components: {
        wfChart,
        wfChartSet
    },
    props: {
        id: {
            type: String
        },
        data: {
            type: Array,
            default () {
                return [{}]
            }
        },
        type: {
            type: String,
            default: 'bar'
        },
        title: {
            type: String,
            default: '柱状图'
        }
    },
    data () {
        return {
            chartOption: null,
            config: {
                title: this.title,
                type: this.type,
                row: "",
                column: [], // 表头
                // legendMap: {
                //     salary: "工资",
                //     income: "收入",
                //     outcome: "支出"
                // }
            },
        };
    },
    created () {
        if (this.type === 'pie') {
            this.chartOption = initPieOption([{}], this.config);
        } else {
            this.chartOption = initBarOption([{}], this.config);
        }
    },
    mounted () {
        this.setChart();
    },
    methods: {
        // 更新配置config
        updateConfig (map) {
            Object.keys(map).forEach(key => {
                this.config[key] = map[key];
            });
            // console.log("update-chart", map, this.config);
            this.updateOption();
        },

        // 更新option
        updateOption () {
            if (this.type === 'pie') {
                this.chartOption = initPieOption(this.data.slice(0, 200), this.config);
            } else {
                this.chartOption = initBarOption(this.data.slice(0, 200), this.config);
            }

            console.log('chartOption', this.chartOption);

            this.setChart();
        },

        // 更新chart
        setChart () {
            let demoChart = echarts.init(document.getElementById(this.id));
            demoChart.setOption(this.chartOption, true);
        }
    }
};
</script>

<style scoped lang="scss">
.winfy-chart {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .chart-set {
        width: 100%;
        height: 40px;
        margin-bottom: 20px;
    }
    .chart-wraper {
        flex: 1 1 auto;
        width: 100%;
    }
}
</style>
